<template>
    <div>
        <div class="mui-card">
            <!-- 轮播 -->
            <div class="mui-card-content" >
                    <mt-swipe :auto="4000" >
                        <mt-swipe-item v-for="item in photos.images" :key="item">
                            <img :src="item">
                        </mt-swipe-item>
                    </mt-swipe>
            </div>
        </div>
        <transition @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter"
                    @after-leave="afterLeave">
                    <!-- 外层控制小球的轨迹和方向，内层控制小球的运行状态 -->
            <div class="ball" v-show="ballFlag">
                <div class="inner inner-hook"></div>
            </div>
        </transition>
        <!-- 商品购买区 -->
        <div class="mui-card" >
            <div class="mui-card-header">{{photos.content}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    市场价<strong class="market_price">￥{{photos.market_price}}</strong>
                    <!-- 要限定输入的最大值传给子组件 -->
                    <p>购买数量：<numinput @shopcarNumber="getNumber" :max="photos.surplus"></numinput> </p>
                    <div class="mui-btn mui-btn-primary">
                    立即购买
                    </div>
                    <!-- 点击判断前面为真则有click事件，为假没有 -->
                    <button type="button" refs="el" class="mui-btn mui-btn-danger" @click="clickFlag && addCar()" >
                        加入购物车
                    </button>
                </div>
            </div>
        </div>
        <!-- 参数区 -->
        <div class="mui-card">
            <div class="mui-card-header" >
                <p>商品参数</p>
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                <p>商品货号: h133244</p>
                <p>销售原价: ￥655</p>
                <p>商品库存：{{photos.surplus}}</p>
                <p>上架时间: 2018-01-02</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" plain size="large" @click="photoDetails">图文详情</mt-button>
                <mt-button type="danger" plain size="large" @click="photoComment">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script >
    import numinput from '../subcomponents/GoodsInput.vue'
    export default {
        data(){
        return {
            // 接收传过来的参数id值 默认显示第一
            id:this.$route.params.id||1,
            photos:[],
            clickFlag:true,
            ballFlag:false,
            // 保存要添加购物车的数值
            shopCount:1
            }
        },
        created(){
            this.getGoodsInfo()
        },
        methods:{
        getGoodsInfo(){
            this.$http.get('http://localhost:3000/data/'+this.id).then(ret=>{
                this.photos=ret.body
            })
        },
        addCar(){
            this.ballFlag=!this.ballFlag
            // 点击加入购物车执行全局状态中的方法
            // 要把商品 id, 价格，个数传过去
            this.$store.commit('car',{
                goodsId:this.id,
                // 价格
                goodsPrice:this.photos.market_price,
                // 个数
                goodsCount:this.shopCount,
                // 开关选中的状态
                goodsSelected:true
            })
        },
        // 小球加入购物车动画
        beforeEnter(el){
            this.clickFlag=false
            el.style.transform="translate(0,0)"
        },
        enter(el,done){
            el.offsetHeight
            // 获取小球距浏览器窗口的距离
            var ball=el.getBoundingClientRect()
            // 购物车距两边的距离
            var shopCar=document.getElementById('badge').getBoundingClientRect()
            // console.log(shopCar.left)
            var ballX=shopCar.left-ball.left
            var ballY=shopCar.top-ball.top
            // 移动的距离是动态获取的，要考虑分辨率的问题
            el.style.transform=`translate(${ballX}px,${ballY}px)`
            el.style.transition="all .3s cubic-bezier(.4,-0.3,1,.68)"
            done()
        },
        afterEnter(el){
           this.ballFlag=!this.ballFlag
        },
        // 假如小球动画完全结束的钩子，恢复点击事件
        afterLeave(){
            this.clickFlag=true
        },
        getNumber(number){
            // 接受的值
            this.shopCount=number
        },
        // 点击跳转图文详情
        photoDetails(id){
            this.$router.push(
                {
                    name:'goodsPicDetails',
                    params:{
                        id:this.id
                    }
                }
                )
        },
        photoComment(){
            this.$router.push(
                {
                    name:'goodsComment',
                    params:{
                        id:this.id
                    }
                }
                )
        }
        },
        components:{
            numinput
        },
    }

</script>

<style lang="scss" scpoed>
        .mint-swipe{
        height: 200px;
        img{
            width: 100%;
            height: 100%;
        }
    }
.ball{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 350px;
    left: 155px;
    z-index: 99;

}
.mui-card-footer{
    display: block;
    button{
        margin-top: 10px;
    }
}
.market_price{
    color: red;
    font-size: 16px;
} 

</style>